import axios from 'axios'
import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Public extends Component {
    searchUser = () => {
        const { keyWordElement: { value: keyWord } } = this
        console.log(keyWord)
        // 发送请求前通知List更新状态
        PubSub.publish('search', { isFirst: false, isLoading: true })
        axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
            response => {
                // 请求成功后通知List更新状态
                PubSub.publish('search', { isLoading: false, users: response.data.items })
            },
            error => {
                // 请求失败通知List更新状态
                PubSub.publish('search', { isLoading: false, err: error.message })
            }
        )
    }

    render() {
        return (
            <div>
                <section className="jumbotron">
                    <h3 className="jumbotron-heading">Search Github Users</h3>
                    <div>
                        <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" />&nbsp;
                        <button onClick={this.searchUser}>Search</button>
                    </div>
                </section>
            </div>
        )
    }
}
